<template>
    <div class="container">
        <div class="content">
            <div class="contents">
                <div class="car" v-for="item in collection" :key="item.carid">
                    <router-link tag="img" :to="'/page?id=' + item.carid" :src="item.carimg" alt=""></router-link>
                    <h4>{{ item.carname }}
                        <img src="../assets/img/下载 (5).png" alt="">
                    </h4>
                    <p class="one">
                        <img src="../assets/img/下载 (4).png" alt="">
                        {{ item.plate }}
                    </p>
                    <p>￥862<span>/天</span></p>
                    <img class="imgs" @click="del(item.carid)" src="../assets/img/下载 (6).png" alt="">
                    
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>
import { getLoveCar } from '@/api/lovecar'
export default {
    name: "CollecTion",
    data() {
        return {
            lovecar: null,
            collection:null,
            flag: false,
            // shoucang: null
        }
    },
    methods: {
        //取消收藏
        del(id) {
            
            this.collection.splice(this.collection.findIndex(item => item.carid === id),1);
             localStorage.setItem('shoucang',JSON.stringify(this.collection))
        }
    },
    created() {
        getLoveCar().then(data => {
            console.log(data);
            this.lovecar = data.lovecar
        })
        if (localStorage.shoucang) {
            this.collection = JSON.parse(localStorage.getItem("shoucang"))
            console.log(this.collection);
            
        }
  
    
    }
}
</script>

<style lang="scss">
.content {
    width: 100%;
    margin-top: 25px;

    .contents {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-bottom: 75px;

        .car {
            width: 162px;
            height: 194px;
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
            position: relative;

            img {
                width: 100%;
                height: 110px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }

            h4 {
                &>img {
                    width: 12px;
                    height: 12px;
                    float: right;
                    margin-top: 5px;
                }
            }

            .one {
                font-size: 10px;
                color: #3c3c5a;
                margin: 8px 0;

                img {
                    width: 10px;
                    height: 10px;
                }
            }

            p {
                &>span {
                    color: #3c3c5a;
                    font-size: 13px;
                }
            }

            .imgs {
                width: 15px;
                height: 15px;
                position: absolute;
                top: 15px;
                right: 15px;
            }
        }
    }
}
</style>